<template>
	<view class="map">
		<headertop title="脱敏地图" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="mapback">

		</view>
		<view :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="seachbox">
			<view class="ssbox" @click="show=true">
				<span>{{formData.city?formData.city:'请选择'}}</span>
				<image :src="_static('/images/微信图片_20250630092057.png')" style="margin-left: 4rpx;" mode=""></image>
			</view>
			<view class="sinput">
				<image :src="_static('/images/Frame@2x(34).png')" class="seachicon" mode=""></image>
				<input type="search" v-model="formData['name']" @confirm="init('搜索')" placeholder="请输入医院名称进行搜索" />
				<image :src="_static('/images/removeicon.png')" v-if="formData['name']" @click="sc" class="removeicon"
					mode="">
				</image>
				<view class="ss" @click="init('搜索')">
					搜索
				</view>
			</view>
		</view>
		<view class="shujuboxs">
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无内容
				</view>
			</view>
			<view class="shuju" :key="index" v-for="(item,index) in list" @click="daohang(item)" v-else>
				<image :src="item['logo']" class="leftimg" mode=""></image>
				<view class="right">
					<view class="t1">
						{{item['name']}}
					</view>
					<view class="t2">
						<image :src="_static('/images/wz.png')" mode="" class="wzicon"></image>
						<view class="tts">
							<span>{{item['city']}}{{item['address']}}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="bottom">
			<view class="back">
				<view class="xuanxiang">
					<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show=false">
						取消
					</view>
					<view class="tt" style="font-weight: 600;">
						请选择城市
					</view>
					<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
						确认
					</view>
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="zhidfun(chengshilist,formData.city)"
				immediate-change="true" @change="bindChange" class="picker-view" v-if="show">
				<picker-view-column>
					<view class="item" v-for="(item,index) in chengshilist" :key="index">
						{{item['shortname']}}
					</view>
				</picker-view-column>
				<picker-view-column v-if="chengshilist[active]">
					<view class="item" v-for="(item,index) in chengshilist[active]['children']" :key="index">
						{{item['shortname']}}
					</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	const show = ref(false)
	const statusBarHeight = ref('')
	const indicatorStyle = ref(`height: 40px`)
	const barHeight = ref('')
	const back1 = ref('')
	const active = ref(0)
	const total = ref(0)
	const value1 = ref([0])
	const chengshilist = ref([])
	const list = ref([])
	const cityname = ref('')
	const formData = reactive({
		city: '',
		name: '',
		page: 1,
		list_rows: 10
	})
	onShow(() => {
		var chengshitext = uni.getStorageSync('cityVal')
		if (chengshitext) {

			return
		}
		uni.getSetting({
			success: (res) => {
				if (!res.authSetting['scope.userLocation']) {
					console.log('授权位置');
					// 未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							getLocation()
						},
						fail: () => {

							uni.showModal({
								title: '提示',
								content: '需要位置权限才能使用该功能',
								success(res1) {
									if (res1.confirm) {
										uni.openSetting({
											success(res) {
												if (res
													.authSetting[
														'scope.userLocation'
													]) {
													getLocation()
												} else {
													uni.showToast({
														title: '位置授权失败',
														icon: 'none'
													})
												}
											}
										})
									}
								}
							});

						}
					});
				} else {
					// 已授权，直接获取位置
					getLocation()
				}
			}
		});
	})

	function zhidfun(arr, cityname) {
		if (!cityname) return
		console.log(arr, 'arr----------------');
		for (var i in arr) {
			for (var ii in arr[i]['children']) {
				if (cityname.indexOf(arr[i]['children'][ii]['shortname']) != -1) {
					return [i * 1, ii * 1]
				}
			}
		}
	}

	function daohang(item) {
		wx.openLocation({
			latitude: item.lat * 1, //纬度
			longitude: item.lng * 1, //经度
			name: item.name,
			address: item.city + item.address,
		});
	}

	function getLocation() {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				console.log(res, 'res--------');
				getCityByLatLnginit(res)
			},
			fail: (err) => {
				uni.showToast({
					title: '获取定位失败',
					icon: 'none'
				})
			}
		});
	}
	async function getCityByLatLnginit(res1) {
		const res = await $api.getCityByLatLng({
			longitude: res1.longitude,
			latitude: res1.latitude
		})
		if (res.code == 1) {
			console.log(res, '$api$api');

			formData['city'] = res.data.shortname
			cityname.value = res.data.shortname
			for (var i in chengshilist.value) {
				for (var ii in chengshilist.value[i]['children']) {
					if (formData['city'].indexOf(chengshilist.value[i]['children'][ii]['shortname']) != -1) {
						// active1.value = i
					}
				}
			}
			list.value = []
			formData['page'] = 1
			init()
		}
	}

	function sc() {
		formData.name = ''
		list.value = []
		formData['page'] = 1
		init()
	}

	onReachBottom(() => {
		if (total.value > list.value.length) {
			formData['page']++
		}
		init()
	})
	onLoad(() => {
		liandong()
	})

	function bindChange(e) {
		const val = e.detail.value
		console.log(val);
		active.value = val[0]
		console.log(chengshilist.value[val[0]]['children'][val[1]], '125125');
		cityname.value = chengshilist.value[val[0]]['children'][val[1]]['shortname']
	}



	function queding() {

		if (!cityname.value) {
			formData['city'] = chengshilist.value[0]['children'][0]['shortname']
		} else {
			var ind = chengshilist.value[active.value]['children'].findIndex(item => item['shortname'] == cityname.value)
			formData['city'] = chengshilist.value[active.value]['children'][ind]['shortname']
		}

		list.value = []
		formData['page'] = 1
		init()
		show.value = false
	}
	async function liandong() {
		const res = await $api.cityData()
		if (res.code == 1) {
			chengshilist.value = res.data
			var chengshitext = uni.getStorageSync('cityVal')
			if (chengshitext) {
				formData['city'] = chengshitext
				cityname.value = chengshitext
				for (var i in chengshilist.value) {
					for (var ii in chengshilist.value[i]['children']) {
						if (formData['city'].indexOf(chengshilist.value[i]['children'][ii]['shortname']) != -1) {
							active.value = i
						}
					}
				}
				list.value = []
				formData['page'] = 1
				init()
			}
		}
	}
	async function init(str) {
		if (str == '搜索') {
			list.value = []
			formData['page'] = 1
		}
		const res = await $api.hospitallist(formData)
		if (res.code == 1) {
			list.value.push(...res.data.data)
			total.value = res.data.total
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})
</script>
<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.back {
		background: #FFFFFF;
		width: 100%;
		overflow: hidden;
		border-radius: 30rpx 30rpx 0 0;

		.xuanxiang {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			overflow: hidden;
			justify-content: space-between;
			margin-bottom: 30rpx;
			background: #FFFFFF;

			.tt {
				font-size: 32rpx;
			}
		}

	}

	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	page {
		background: #F7F8FA;
	}

	.map {
		width: 100%;
		overflow: hidden;
		position: relative;

		.mapback {
			width: 100%;
			height: 312rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.shujuboxs {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;

			.shuju {
				width: 100%;
				height: 160rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.leftimg {
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-left: 16rpx;
				}

				.right {
					margin-left: 24rpx;
					overflow: hidden;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #86909C;
						display: flex;
						margin-top: 34rpx;
						align-items: center;

						.tts {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							width: 470rpx;
						}

						.wzicon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
					}

				}
			}
		}

		.seachbox {
			width: 686rpx;
			margin: auto;
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.sinput {
				width: 578rpx;
				height: 76rpx;
				position: relative;
				overflow: hidden;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				box-shadow: 0rpx 4rpx 10rpx 0rpx #A6E2FF;
				display: flex;
				align-items: center;
				position: relative;
				background: #FFFFFF;
				font-size: 28rpx;

				input {
					width: 320rpx;
				}

				.removeicon {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 22%;
				}

				.seachicon {
					height: 32rpx;
					width: 32rpx;
					margin-left: 28rpx;
					margin-right: 12rpx;
				}

				.ss {
					width: 108rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					position: absolute;
					right: 0%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #2AB4F5;
					border-left: 2rpx solid #D3EDFA;
				}
			}

			.ssbox {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1D2129;
				width: 150rpx;

				image {
					width: 22rpx;
					height: 14rpx;
				}
			}
		}
	}
</style>